{% unless grid_item_width %}
  {% assign grid_item_width = 'large--one-quarter medium-down--one-half' %}
{% endunless %}

{% unless current_collection %}
  {% assign current_collection = collection %}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available  %}
  {% assign sold_out = false %}
{% endif %}

{% comment %}
  Select the product image size from settings.
{% endcomment %}
{% assign image_size = settings.collection_prod_image_sizes %}

<div class="grid-item {{ grid_item_width }}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">

  <a href="{{ product.url | within: current_collection }}" class="product-grid-item">
    <div class="product-grid-image">
      <div class="product-grid-image--centered">
        {% if sold_out %}
          <div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div>
        {% endif %}
        <img src="{{ product.featured_image.src | img_url: image_size }}" alt="{{ product.featured_image.alt | escape }}">
      </div>
    </div>

    <p>{{ product.title }}</p>

    <div class="product-item--price">
      <span class="h1 medium--left">
        {% include 'price' with product.price %}
      </span>

      {% if on_sale %}
        <span class="sale-tag medium--right{% if settings.product_reviews_enable %} has-reviews{% endif %}">
          {% assign compare_price = product.compare_at_price %}
          {% assign product_price = product.price %}
          {% include 'price-sale' %}
        </span>
      {% endif %}
    </div>

    <div class="product-item--other">
        {% comment %}
        {% if product.variants.size == 1 %}
            <button class="btn" type="button">{{ 'products.general.add_to_cart' | t }}</button>
            {% if product.is_quotable %}
                <button class="btn" type="button">{{ 'products.general.add_to_quote' | t }}</button>
            {% endif %}
        {% endif %}
        {% endcomment %}
    </div>

    {% if settings.product_reviews_enable %}
      <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
    {% endif %}
  </a>

</div>
